import React, { PureComponent } from 'react'
import { connect, history } from '@umijs/max'

import { Col, Row } from 'antd'
// import HufuEcharts from '@/components/Echarts'
import { getHashParameterByName } from '@/utils/helper'
import { BreadcrumbBar } from '@/components'
import { InfoShow, WorkFlow } from './page-components'
import styles from './index.less'

const menus = [{ name: '任务运维' }, { name: '详情' }]

const calcStatus = (status) => {
  switch (status) {
    case 1:
      return <span className={styles.cont} title="未运行">未运行</span>
    case 2:
      return <span className={styles.cont} title="运行中">运行中</span>
    case 3:
      return <span className={`${styles.cont} ${styles.success}`} title="成功">成功</span>
    case 4:
      return <span className={`${styles.cont} ${styles.error}`} title="失败">失败</span>
    case 5:
      return <span className={styles.cont} title="停止">停止</span>
    case 6:
      return <span className={`${styles.cont} ${styles.error}`} title="部分失败">部分失败</span>
    default:
      return '-'
  }
}

@connect(({ operationDetail }) => ({ ...operationDetail }))
class OperationView extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      infoData: {},
      execptionLineOptions: {},
    }
  }

  componentDidMount() {
    // this.setState({
    //   // execptionLineOptions: execptionLineOptionsParams,
    // })
    this.initData()
  }

  initData = () => {
    this.props.dispatch({
      type: 'operationDetail/queryDetail',
      params: {
        // jobId: getHashParameterByName('jobId'),
        nodeId: getHashParameterByName('nodeId'),
      },
      cb: (res) => {
        this.setState({
          infoData: res,
        }, () => {
          this.initOption()
        })
      },
    })
  }

  // 设置任务运行信息
  initOption = () => {
    // if (!this.state.infoData.expendInfos) this.state.infoData.expendInfos = []
    const { infoData } = this.state

    const yAxisDataArr = []
    const series1DataArr = []
    const series2DataArr = []
    infoData?.expendInfos?.map((item) => {
      yAxisDataArr.push(item.nodeName)
      series1DataArr.push({
        value: item.endTime,
        itemStyle: {
          color: item.status === 3 ? '#0084FF' : '#FFA726',
          borderColor: '#fff',
          borderWidth: 2,
        },
      })
      series2DataArr.push(item.startTime)
      return null
    })
    const options = {
      backgroundColor: '#fff',
      legend: {
        y: 'top',
        x: 'right',
        selectedMode: false,
        data: [
          {
            name: '成功',
            itemStyle: {
              color: '#0084FF',
            },
          },
          {
            name: '失败',
            itemStyle: {
              color: '#FFA726',
            },
          },
        ],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'time',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#E3E3E3',
          },
        },
        axisLabel: {
          color: '#5B5B5B',
          formatter: (value, index) => {
            const xDate = new Date(value)
            const timeStrFun = (time) => (time < 10 ? `0${time}` : `${time}`)
            // return xDate.getMonth() + 1 + "/" + xDate.getDate() + " " + timeStrFun(xDate.getHours()) +
            //        ":" + timeStrFun(xDate.getMinutes()) + ":" + timeStrFun(xDate.getSeconds());
            return `${timeStrFun(xDate.getHours())
            }:${timeStrFun(xDate.getMinutes())}:${timeStrFun(xDate.getSeconds())}`
          },
        },
      },
      yAxis: {
        data: yAxisDataArr,
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#E3E3E3',
          },
        },
        axisLabel: {
          color: '#5B5B5B',
        },
        axisTick: {
          show: false,
        },
      },
      tooltip: {
        trigger: 'axis',
        formatter(params) {
          let res = `${params[0].name}</br>`
          if (params[0].color === '#FFA726') {
            res += '失败' + '</br>'
          } else {
            res += '成功' + '</br>'
          }
          const date0 = params[0]?.data?.value
          const date1 = params[1]?.data
          res += `任务开始时间：${date1}</br>`
          res += `任务结束时间：${date0}</br>`
          return res
        },
      },
      series: [{
        name: '成功',
        type: 'bar',
        stack: 'test1',
        zlevel: -1,
        barMaxWidth: '50%',
        data: series1DataArr,
      },
      {
        name: '失败',
        type: 'bar',
        stack: 'test1',
        barMaxWidth: '50%',
        itemStyle: {
          color: '#fff',
        },
        zlevel: -1,
        data: series2DataArr,
      }],
    }

    setTimeout(() => {
      this.setState({
        execptionLineOptions: options,
      })
    }, 500)
  };

  render() {
    const { infoData } = this.state
    const calcExecuteType = ['手动执行', '周期执行'][infoData?.executeType] || '-'
    const calcCycle = ['月', '周', '天', '小时', '分钟', '无', '-'][infoData?.cycle] || '-'
    const calcIsDependent = ['不依赖上一调度周期', '等待上一周期结束再运行'][infoData?.cycleDependency] || '-'
    return (
      <div className={styles.operation_detail}>
        <BreadcrumbBar menu={menus} />
        <div className={styles.back_bar}>
          <i
            className="iconfont icon-zuo"
            onClick={() => { history.push('/data-development/offline/task-operation') }}
          />
          <span onClick={() => { history.push('/data-development/offline/task-operation') }}>详情</span>
        </div>
        <div className={styles.container}>
          <div className={styles.title}>基本信息</div>
          <Row className={styles.row}>
            <Col span={8} className={styles.col}>任务名称：<span className={styles.cont} title={infoData.name}>{infoData.name}</span></Col>
            <Col span={8} className={styles.col}>任务类型：<span className={styles.cont} title={calcExecuteType}>{calcExecuteType}</span></Col>
            <Col span={8} className={styles.col}>调度周期：<span className={styles.cont} title={calcCycle}>{calcCycle}</span></Col>
          </Row>
          <Row className={styles.row}>
            <Col span={8} className={styles.col}>跨周期依赖：<span className={styles.cont} title={calcIsDependent}>{calcIsDependent}</span></Col>
            <Col span={8} className={styles.col}>创建时间：<span className={styles.cont} title={infoData.createTime || '-'}>{infoData.createTime || '-'}</span></Col>
            <Col span={8} className={styles.col}>责任人：<span className={styles.cont} title={infoData.userName || '-'}>{infoData.userName || '-'}</span></Col>
          </Row>
          {/*<div className={styles.title}>运行信息</div>*/}
          {/*<Row className={styles.row}>*/}
          {/*  <Col span={8} className={styles.col}>任务状态：{calcStatus(infoData.status)}</Col>*/}
          {/*  <Col span={8} className={styles.col}>计划开始时间：<span className={styles.cont} title={infoData.planTime || '-'}>{infoData.planTime || '-'}</span></Col>*/}
          {/*  <Col span={8} className={styles.col}>开始时间：<span className={styles.cont} title={infoData.startTime || '-'}>{infoData.startTime || '-'}</span></Col>*/}
          {/*</Row>*/}
          {/*<Row className={styles.row}>*/}
          {/*  <Col span={8} className={styles.col}>结束时间：<span className={styles.cont} title={infoData.endTime || '-'}>{infoData.endTime || '-'}</span></Col>*/}
          {/*  <Col span={8} className={styles.col}>运行时长：<span className={styles.cont} title={`${infoData.executeTime ? `${infoData.executeTime}(s)` : '-'}`}>{`${infoData.executeTime ? `${infoData.executeTime}(s)` : '-'}`}</span></Col>*/}
          {/*</Row>*/}
          {/*<div className={styles.title}>任务运行信息</div>*/}
          {/*<div className={styles.charts_box}>*/}
          {/*  <HufuEcharts*/}
          {/*    options={execptionLineOptions}*/}
          {/*  />*/}
          {/*</div>*/}
          <div className={styles.title}>任务链路信息</div>
          <div className={styles.link_info}>
            {/*<div className={styles.left_part}>*/}
            {/*  <InfoShow />*/}
            {/*</div>*/}
            <div className={styles.work_flow}>
              {
                infoData.name && <WorkFlow infoData={infoData} />
              }
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default OperationView
